<template>
<view class="index-content">
	<!-- 搜索框 -->
	<header class="header">
		<view class="search">
			<view class="img"></view>
			<input class="input" />
		</view>
	</header>
	<!-- 轮播图 -->
	<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
		<swiper-item v-for="(item,index) in swiperList" :key="index">
			<navigator :url="'/pages/swiper_detail/index?swiper_id'+this.swiper_id" class="swiper-item uni-bg-red">
				<image class="img" :src="item.image_src" mode="" />
			</navigator>
		</swiper-item>
    </swiper>
	<!-- 分类 -->
	<view class="nav">
		<view class="classify_nav" v-for="(item,index) in navList" :key="index">
			<image :src="item.image_src" mode="" @click="navClick(item)"/>
		</view>
	</view>
	<!-- 楼层区域 -->
	<view class="floor" v-for="(item,index) in floorList" :key="index">
		<view class="title">
			<image :src="item.floor_title.image_src" mode="" />
		</view>
		<view class="floor-content" >
			<view class="left">
				<image :src="item.product_list[0].image_src" mode="" @click="toGoodsList(item.product_list[0].url)" />
			</view>
			<view class="right">
				<view class="right_up">
					<image :src="item.product_list[1].image_src" mode="" @click="toGoodsList(item.product_list[1].url)" />
					<image :src="item.product_list[2].image_src" mode="" @click="toGoodsList(item.product_list[2].url)"/>
				</view>
				<view class="right_down">
					<image :src="item.product_list[3].image_src" mode="" @click="toGoodsList(item.product_list[3].url)"/>
					<image :src="item.product_list[4].image_src" mode="" @click="toGoodsList(item.product_list[4].url)"/>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList:[],
				swiper_id:'',
				navList:[],
				floorList:[]
			}
		},
		onLoad() {
			this.getSwiperList()
			this.getnavList()
			this.getfloorList()
		},
		methods: {
			//轮播图接口
			async getSwiperList(){
				const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata')
				if(res.meta.status == 200) {
				this.swiperList = res.message
				this.swiper_id = res.message.goods_id					
				}else {
					return uni.$showMsg()
				}
			},
			//分类导航栏接口
			async getnavList() {
				const {data:res} = await uni.$http.get('/api/public/v1/home/catitems')
				if(res.meta.status == 200){
					this.navList = res.message
				}else{
					return uni.$showMsg()
				}
			},
			//跳转到商品详情页面
			navClick(item) {
				uni.navigateTo({
					url: '/pages/commify_detail/index?item'+item
				})
			},
			//楼层接口
			async getfloorList() {
				const {data:res} = await uni.$http.get('/api/public/v1/home/floordata')
				if(res.meta.status == 200) {
					res.message.forEach((item)=>{
						item.product_list.forEach((prod)=>{
							prod.url = '/pages/goods_list/index?'+prod.navigator_url.split('?')[1]
						})
					})
					this.floorList = res.message
				}
			},
			//点击楼层图片
			toGoodsList(url) {
				uni.navigateTo({
					 url: url
				});
			}
		}
	}
</script>

<style lang="less" scoped>
.index-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		background-color: #ff0000;
		border: 0 ;
		.search {
			width:80%;
			height: 10%;
			margin: 2% 0;
			border: 1rpx solid rgba(1,1,1,.8);
			border-radius: 5px;
			display: flex;
			align-items: center;
			background-color: aliceblue;
		}
	}
	.swiper {
		width: 100%;
		height: 330rpx;
		.img {
			width: 100%;
			height: 330rpx;
		}
	}
	.nav {
		width: 90%;
		height: 160rpx;
		margin:15rpx 0rpx;
		display: flex;
		justify-content: space-between;
		image {
			width: 128rpx;
			height: 140rpx;
		}	
	}
	.floor {
		width: 100%;
		margin-left: 25rpx;
		.title {
			image {
				width: 100%;
				height: 50rpx;				
			}
		}
		.floor-content {
			display: flex;
			.left {
				image {
					width: 230rpx;
					height: 380rpx;					
				}
			}
			.right {
				.right_up {
					display: flex;
					margin-bottom: 10rpx;
					image {
						width: 240rpx;
						height: 186rpx;
						margin: 0 8rpx;
 					}
				}
				.right_down {
					display: flex;
					image {
						width: 240rpx;
						height: 186rpx;
						margin: 0 8rpx;
 					}
				}
			}
		}
	}
}
</style>
